<template>
    <v-dialog v-model="value" :width="width">
        <v-sheet class="pa-6 rounded-lg">
            <h1 style="user-select: none">
                {{ title }}
            </h1>
            <div class="mt-6">
                <slot></slot>
            </div>
            <div class="mt-2">
                <v-btn @click="emits('confirm')" color="primary">
                    <template v-slot:prepend>
                        <v-icon color="background">mdi-check</v-icon>
                    </template>
                    {{ confirmText }}
                </v-btn>
                <v-btn class="ms-4" @click="emits('cancel')" color="error">
                    <template v-slot:prepend>
                        <v-icon color="background">mdi-close</v-icon>
                    </template>
                    {{ cancelText }}
                </v-btn>
            </div>
        </v-sheet>
    </v-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "标题",
    },
    confirmText: {
        type: String,
        default: "确认",
    },
    cancelText: {
        type: String,
        default: "取消",
    },
    width: {
        type: String,
        default: "400px",
    },
});

const emits = defineEmits<{
    (event: "confirm"): void;
    (event: "cancel"): void;
    (event: "update:modelValue", value: boolean): void;
}>();

const value = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emits("update:modelValue", value);
    },
});
</script>
